<template>
	<view class="content mainpadding">
		<!-- 電影票信息 -->
		<view class="mainpadding ffffff border2">
			<view class="flexleft">
				<image class="textBg margin_right2 " src="/static/goods.png" mode=""></image>
				<view class="justify_between_column " style="width: 450rpx;height: 228rpx;">
					<view class="text_j color_ling yihang">八角笼中</view>
					<view class="text_five color_six yihang">今天7月17日 13:45-14:45</view>
					<view class="text_five color_yellow yihang">10號厅·5排 6座 5排 7座</view>
					<view class="text_five color_six yihang">万达影城（中原万达IMAX店）</view>
					<view class="text_five color_six yihang">中原區中原中路171號万达广场5-6层中原區中原中路171號万达广场5-6层</view>
				</view>
			</view>
		</view>
		<!-- 套餐 -->
		<view class="margin_top ffffff border2">
			<view class="flexbetween paddinglr padding_top3">
				<view class="text_w color_ling">單人餐</view>
				<view class="flexleft" @click="show=true">
					<view class="text_a color_six margin_right2">查看全部</view>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="flex mainpadding line_bottom" v-for="item in 2">
				<image class="imgBox margin_right3" src="/static/goods.png" mode=""></image>
				<view class="justify_between_column flex1" style="height: 110rpx;">
					<view class="text_w color_ling">中桶爆米花+中杯可乐</view>
					<view class="flexbetween">
						<view class="text_w color_orange">$56</view>
						<view class="flexleft">
							<view class="reduce color_six">-</view>
							<!-- <input class="text_g" type="text"> -->
							<view class="text_g margin_right2 margin_left2">1</view>
							<view class="add color_fff">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 購票须知 -->
		<view class="margin_top mainpadding ffffff border2" v-if="type==0">
			<view class="text_w color_ling">購票须知</view>
			<view class="margin_top text_five color_six">
				1.請提前30分钟左右到達影院現场，通過影院自助取票機完成取票。
				2.若取票過程中遇到无法取票等其它問題，請聯係影院工作人員進行處理。
				3.請及时關注電影開场时問，凭票有序检票入场。
				4.如需開具電影票發票，可聯係影院工作人員凭当日票根進行開具，若遇到特殊情况請及时聯係猫眼客服人員。
				5.退票、改签服務請参考影院具体政策要求，特殊场次及部分使用卡、券场次訂單可能不支持此服務。
				6.客服電話: 1010-5335，也可在当前頁面聯係在线客服，工作時間: 9:00-22:00，國家法定節假日延至24:00。
			</view>
		</view>
		<!-- 底部 -->
		<view class="footerBox">
			<view class="footerPirce flexbetween">
				<view class="flexleft paddingtb padding_left3">
					<view>
						<text class="color_ling text_d">合計：</text>
						<text class="totalPrice">$</text>
						<text class="totalPrice" style="font-size: 36rpx;">296</text>
					</view>
				</view>
				<view class="flexleft">
					<view class="flexleft margin_right2" v-if="type==1" @click="detailShow=true">
						<view class="text_g color_jiu margin_right1">明細</view>
						<u-icon name="arrow-up" color="#999999" size="14"></u-icon>
					</view>
					<view class="settlement" @click="payment">
						確定
					</view>
				</view>
			</view>
		</view>
		<!-- 商品弹窗 -->
		<u-popup :show="show" :round="20" mode="bottom" @close="show=false">
			<view class="popupBox">
				<view class="text_a color_ling text title padding_bottom line_bottom">
					全部商品
				</view>
				<view style="margin-top: 120rpx;">
					<view class="text_w color_ling paddinglr margin_top">單人餐</view>
					<view class="flex mainpadding line_bottom" v-for="item in 2">
						<image class="imgBox margin_right3" src="/static/goods.png" mode=""></image>
						<view class="justify_between_column flex1" style="height: 110rpx;">
							<view class="text_w color_ling">中桶爆米花+中杯可乐</view>
							<view class="flexbetween">
								<view class="text_w color_orange">$56</view>
								<view class="flexleft">
									<view class="reduce color_six">-</view>
									<!-- <input class="text_g" type="text"> -->
									<view class="text_g margin_right2 margin_left2">1</view>
									<view class="add color_fff">+</view>
								</view>
							</view>
						</view>
					</view>
					<view class="text_w color_ling paddinglr margin_top">双人餐</view>
					<view class="flex mainpadding line_bottom" v-for="item in 3">
						<image class="imgBox margin_right3" src="/static/goods.png" mode=""></image>
						<view class="justify_between_column flex1" style="height: 110rpx;">
							<view class="text_w color_ling">中桶爆米花+中杯可乐</view>
							<view class="flexbetween">
								<view class="text_w color_orange">$56</view>
								<view class="flexleft">
									<view class="reduce color_six">-</view>
									<!-- <input class="text_g" type="text"> -->
									<view class="text_g margin_right2 margin_left2">1</view>
									<view class="add color_fff">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 明細弹窗 -->
		<u-popup :show="detailShow" :round="20" mode="bottom" @close="detailShow=false">
			<view class="popupBox">
				<view class="text_a color_ling text title padding_bottom line_bottom">
					明細
				</view>
				<view style="margin-top: 100rpx;">
					<!-- 对接接口判断是否加上line_bottom -->
					<view class="mainpadding line_bottom" v-for="item in 6">
						<view class="text_a color_ling">观影票1張</view>
						<view class="flexbetween margin_top">
							<view class="text_a color_six">[武汉站] [林有嘉] 《idol》</view>
							<view class="text_a color_orange">$56</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				detailShow:false,
				type:0,//0電影票 1演唱會
			}
		},
		onLoad(options) {
			this.type=options.type
		},
		methods: {
			payment(){
				uni.navigateTo({
					url:"./payment?isGoole=0"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 180rpx;
	}

	.textBg {
		width: 164rpx;
		height: 228rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}

	.imgBox {
		width: 110rpx;
		height: 110rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.reduce {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		border: 2rpx solid #CDCDCD;
	}

	.add {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FF5C00;
		border-radius: 50%;
		border: 2rpx solid #FF5C00;
	}

	// 底部
	.footerBox {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 40rpx;

		.footerPirce {
			width: 708rpx;
			height: 101rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 53rpx 53rpx 53rpx 53rpx;
		}

		.totalPrice {
			font-size: 26rpx;
			font-family: DIN Next LT Pro-Medium;
			font-weight: 500;
			color: rgba(253, 70, 62, 1);
		}

		.settlement {
			width: 178rpx;
			height: 101rpx;
			line-height: 101rpx;
			text-align: center;
			background: #FFB800;
			border-radius: 0rpx 53rpx 53rpx 0rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}

	//修改背景颜色
	::v-deep.u-popup__content {
		background-color: #fafafa !important;
	}

	.popupBox {
		height: 700rpx;
		padding: 0 0 50rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		box-sizing: border-box;
		overflow-y: auto;

		.title {
			width: 100%;
			padding-top: 50rpx;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			position: fixed;
			z-index: 999;
			left: 50%;
			transform: translateX(-50%);
			bottom: 605rpx;
			background-color: #fafafa;
		}

	}
</style>